import React, { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
import { LockOnIcon, UserIcon, BrowseOffIcon, BrowseIcon, RefreshIcon } from 'tdesign-icons-react';
import classNames from 'classnames';
import QRCode from 'qrcode.react';
import { useAppDispatch } from 'modules/store';
import { login } from 'modules/user';
import useCountdown from '../../hooks/useCountDown';
import { generatePath } from 'utils/path';

import Style from './index.module.less';
import TitleStyle from '../../title.module.less';

const { FormItem } = Form;

export default function Login() {
  const [showPsw, toggleShowPsw] = useState(false);
  const formRef = useRef<FormInstanceFunctions>();
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const onSubmit = async (e: SubmitContext) => {
    if (e.validateResult === true) {
      try {
        const formValue = formRef.current?.getFieldsValue?.(true) || {};
        console.log(formValue);
        const res = await dispatch(login(formValue));
        console.log(res);
        if (res?.payload?.code === 'OK') {
          MessagePlugin.success('登录成功');
          setTimeout(() => {
            navigate(generatePath('/order'));
          }, 5000);

        } else {
          MessagePlugin.error(res?.payload?.message);
        }
      } catch (e) {
        console.log(e);
        MessagePlugin.error('登录失败');
      }
    }
  };

  function gotoCompanyRegister() {
    navigate(generatePath('/register/company'));
  }
  function gotoStaffRegister() {
    navigate(generatePath('/register/staff'));
  }

  return (
    <div>
      <div className={TitleStyle.titleContainer}>
        <h1 className={TitleStyle.title}>企业账号登录</h1>
        <div className={TitleStyle.subTitle}>
          <p className={classNames(TitleStyle.tip, TitleStyle.registerTip)}>没有账号吗?</p>
          <p className={classNames(TitleStyle.tip)}>
            <a className={TitleStyle.loginTip} onClick={gotoCompanyRegister}>
              创建企业
            </a>
            <span> 或 </span>
            <a className={TitleStyle.loginTip} onClick={gotoStaffRegister}>
              首次加入企业注册
            </a>
          </p>
        </div>
      </div>
      <Form ref={formRef} className={classNames(Style.itemContainer)} labelWidth={0} onSubmit={onSubmit}>
        <FormItem name='phone' rules={[{ required: true, message: '手机号必填', type: 'error' }]}>
          <Input size='large' placeholder='请输入手机号'></Input>
        </FormItem>
        <FormItem name='password' rules={[{ required: true, message: '密码必填', type: 'error' }]}>
          <Input
            size='large'
            type={showPsw ? 'text' : 'password'}
            placeholder='请输入密码'
            prefixIcon={<LockOnIcon />}
            suffixIcon={
              showPsw ? (
                <BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
              ) : (
                <BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
              )
            }
          />
        </FormItem>
        <div className={classNames(Style.checkContainer, Style.rememberPwd)}>
          <Checkbox>记住账号</Checkbox>
          <span className={Style.checkContainerTip}>忘记密码？</span>
        </div>
        <FormItem className={Style.checkContainer} name='checked' initialData={false}>
          <div className={Style.contractLine}>
            <Checkbox>我已阅读并同意 </Checkbox> <span className='tip'>《AI货运助手托运服务协议》</span>
            <span className='tip'>《AI货运助手企业版网络货运服务协议》</span>
          </div>
        </FormItem>
        <FormItem className={Style.btnContainer}>
          <Button block size='large' type='submit'>
            登录
          </Button>
        </FormItem>
      </Form>
    </div>
  );
}
